<template>
  <div>
    <div class="tableDemo">
      <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
        <!-- 对数据的处理，最最最重要的一句话 -->
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
      </el-pagination>
      <!--
                属性：
                page-sizes         // 这是下拉框可以选择的，每选择一页，要展示多少内容
                page-size             // 每页显示的条数
                layout="total, sizes, prev, pager, next, jumper，->"
                    prev表示上一页，next为下一页，pager表示页码列表，，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。
                total                 // 总共有多少数据
                current-page         // 当前页数
                方法：
                size-change(每页的条数)        pageSize(每页显示的条数) 改变时会触发(每页显示的条数改变时)    (改变下拉框中的每页显示几条时触发，然后将每页显示的条数 = 改变的值)
                current-change(当前页)        currentPage(页码)改变时会触发    (点击跳转到第几页时或跳页时触发，然后将当前页 = 改变的值)
                必需的属性：
                page-size             // 每页显示的条数
                total                 // 总共有多少数据
            -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1, // 初始页
      pagesize: 5, //    每页的数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange (size) {
      this.pagesize = size // 将每页显示的条数 = 改变的值
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage // 然后将当前页 = 改变的值
      console.log(this.currentPage) // 点击第几页
    }
  }
}
</script>

<style>
  .tableDemo {
    width: 50%;
    margin: 0 auto;
  }
</style>
